Customise a card#
Introduction#
Figure 1 is an example of a single default card. An individual card can be customised in different ways as explained below. But first, some explanation of the two types of cards, and the different components that can appear on a card.
Types of cards: information and navigation#
The Card Interface understands two types of card: information, and navigation. The following table summarises the major differences between the two types of cards. The type of card is determined by the type of its matching Blackboard item.
Card | Purpose | Blackboard Item |
Information | Display small bit of information | Content item |
Navigation | Provide a link to and display a small bit of information about another resource Can have numeric card labels | Content Folder, Web link, Discussion board, Assessment item or any other Blackboard item that produces a link to another resource |
Figure 2 shows three cards. The first card is an Information card. The other two cards are Navigation cards.
The Information card does not have an engage button as there is nothing to engage with by clicking. It just provides a bit of descriptive text, which in this case talks about the purpose of this page.
The two Navigation cards have an engage button if the mouse is placed over these cards, then (as shown by the second card Figure 2) in the entire card will be surrounded by a blue border. Clicking on a Navigation card will take the visitor to the link pointed to by the card.
The components of a card#
Each card can be made up of many different components. Each component serves a different purpose and can be used to customise the card. Figure 3 shows a single card with labels identifying each of the major components. The following table provides more detail on each component.
Component | Description |
Image | A visual intended to help students connect/associate conceptually and emotionally with the item the card represents. Rather than an image this can be a single background colour. |
Date | Provides an indication to students as to when they should work on the item. Dates can be explicit (Oct 5) or they can be generic and based on the Griffith University calendar (e.g. Week 5) The date also has a Date Label that can be changed. In Figure 3 the date label is Commencing. |
Label | Identifies the type of object the card represents. For Figure 3 the card represents the fifth tutorial. The Card Interface automatically calculates the number. The default label is Module but change be changed. |
Title | Matches the Name of the Blackboard item. |
Description | The Text of the Blackboard item. |
Engage | Provides an additional visual affordance to the viewer that the card is something to be clicked on. The text for this button or whether there is a button can be customised for all cards on the current page. |
Adding an image#
There are two ways to add (or change) an image, by:
- Image URL (link).
- Image upload.
Image URL (link)
Pre-requisite: To use this approach you must know the URL (link) for the image. For example, the URL - https://djon.es/images/GrandCanyon.jpg is for a photo of the Grand Canyon.
You can use Google Images to search for relevant images, or use other images you find online by copying the image URL.
Think twice about using an image URL from the Blackboard content collection
This can cause problems when you copy the course for a new offering.
How to do it
- Edit the content item for the card you with to customise by adding an image.
- Paste the URL for your image after (and on the same line) as Card Image: (e.g. Figure 4)
- Save your changes.
When you view the page, the card should now be displaying the image from the URL you provided (e.g. Figure 5).
Troubleshooting: My card image doesn’t appear
To double check that you have the correct URL for the image open a new browser window and paste the image URL into browser location. Your browser should open and display the image.
If it doesn’t then your image URL is incorrect.
Image upload
If you have a digital copy of the image, but don’t have or would prefer not to use a URL then you can upload the image into the Blackboard item.
How to do it
- Make sure you have a copy of the image on your computer.
- Edit the content item for your card.
- Use these instructions to embed an image in the content item and ensure that the Image Description is Card Image.
It is suggested you embed the image at the bottom of the content item to make it easy to edit the other content.
Figure 6 shows the same content item as Figure 4, but in this case the image is being uploaded into Blackboard. This content item will produce a card that looks the same as Figure 5.
Adding an “active” image#
As shown in Figure 3, one of the possible card components is a date or date range. Suggesting that the information contained by the card is particularly relevant for that date or date range.
To reinforce the association between the card and a date it is possible to specify an active image for a card. Normally, the card will display the card image specified in previous sections. If there is an active image specified, the active image will be shown instead when the card is “active”. i.e. when viewed during its specified date or date range.
Note: the date and time a card is being viewed is calculated by the web browser and computer used to view the web page. Hence the current time and date is based on that of the viewer.
Given time zones, someone viewing a card from Brisbane may see a different active image than someone viewing the same card from London.
For example
The following figure (Figure 7) shows a card that has been configured with an active image. Done using the Card Image Active: line. The date for this card has been set to January 12. The card will be “active” when viewed on January 12.
Figure 7 - A Card content item with a "Card Image Active" defined
The next two figures are views of this card taken on different days. Figure 8 is what the card looked like on January 11. On January 11, the Card Image was shown. Figure 9 is what the card looked like on January 12. On January 12, the Card Image Active was shown.
Possible dates and date ranges
The Card Interface supports three different types of dates or date ranges. The following table summarises these possibilities and how they work with the active image.
Type of date | Example | When is the active image displayed? |
Specific date | January 12 | Between 12am and 11:59pm on January 12 |
Griffith University Trimester Week | Week 5 | Between 12am Monday and 11:59pm Sunday of the week matching week 5 of Griffith trimester for the course site. |
Date range | Jan 12-Jan 14 | Between 12am January 12 and 11:59pm January 14 |
Date range (Griffith) | Week 2-Week 4 | Between 12am Monday Week 2 and 11:59pm Sunday of Week 4 |
Changing how the image fits the card#
Not all (or perhaps even many) images will fit neatly into the image space on a card. Some images will be too big. Some too small. Some will have the wrong aspect ratio. For example,
Figure 10 shows an image that has been cut off because it is too wide.
There are three options you can use to change how the image fits the card
- Cover (the default);
- contain; and,
- manually resize the image.
Suggested aspect ratio – 3x1
Experimentation from someone using the Card Interface found that an image resolution of 2200x720 seemed to work best. At least for 3 cards to a row. Suggesting an aspect ratio of 3x1 as a possible guide.
Cover – the default
By default (you don’t need to do anything for this to happen) the card makes the image "cover" the available space. That is, it scales the width and height of the image to ensure there is no unfilled space.
If the image aspect ratio is wrong, you end up with the problem shown in
Figure 10. Some part of the image extends beyond the available space and is invisible (it is cropped).
Contain
As an alternative, you can tell the Card Interface to "contain" the image. That is, scale the image height and width so that it fits entirely within the space without cropping or stretching. For example, Figure 11.
With some images, containing an image will result in an image that is too narrow to take up the full width of a card. When this happens, the image will be centered as shown in Figure 12
How to do it – contain
To specify that an image should be contained, add the following to the relevant content item.
Card Image Size: contain
Figure 13 shows an item with this added and how it changes the image. Compare Figure 13 with the same card shown in Figure 5.
Manually resize the image
If neither cover nor contain provide a suitable method, you can always manually resize or crop the image to produce an appropriate aspect ratio and size.
To do this you will need to use an external tool such as PhotoShop, Paint3D, or one of the free online services.
Using a background colour#
If you do not want to use an image you can just not specify anything after Card Image: As shown in Figure 1, when there is no image the image space is left white.
If you would like to change the background colour, add a valid HTML colour name, a colour hex code, or rgb function after Card Image: For example, Figure 14 shows a card with a red background colour.
There are many HTML colour pickers on the Web that can help you choose a colour.
Use a video, PowerPoint presentation etc. instead.#
You may prefer to use a YouTube video, PowerPoint presentation or other form of shareable web content. For example, Figure 15 shows a card with a YouTube video instead of a card image. The video can be played, expanded etc from within the card.
How to do it
- Copy the embed code for the video or other resource you want to use.
(e.g. here’s how to get the embed code for a YouTube video) - Edit the Blackboard item matching the card.
- Change Card Image: to Card Image Iframe:
- Use the View HTML button on the editor to paste the embed code next to Card Image Iframe:
For example, Figure 16 has highlighted the embed code for the YouTube video being pasted into the item for Figure 15.
Adding a date (or date range)#
There can be value in providing students with suggestions as to when they should engage with the activities and resources associated with a card. Figure 17 provides three examples of different ways you can add a date or a date range to cards. Dates are displayed using a calendar-like element in the top left-hand corner of the card.
To add a date to a card like the last card in Figure 17, you add
Card Date: Mar 11
to the card’s content item as shown in Figure 18. The following table gives examples of the other types of dates that can be added.
Date type | Example | What is displayed |
University date | Card Date: Week 1 | e.g. the Overview card in Figure 17 showing both Week 1 and the date Feb 25. Feb 25 was automatically calculated based on the Griffith University study period associated with the course. For this study period, Week 1 commenced on Feb 25. |
University date range | Card Date: Week 3-5 | e.g. the last card in Figure 17 showing a date range from March 11 (Monday of Week 3) and extending to March 25 (Friday of Week 5). Again, this is based on the associated Griffith University study period. |
Specific date | Card Date: Feb 14 | e.g. the second card in Figure 17. Since now University date is provided no “week” is displayed. Just the specific date. |
Specific date range | Card Date: Feb 14-Feb 21 | Will display a date range like the last card, but without the “week” element. |
University dates are automatically updated
As course content is copied from course site to course site, University dates will be automatically updated to use the dates associated with the new course site.
Adding a date
Date Label
Each of the cards in Figure 17 have different date labels – the text displayed in black at the top of the date, including:
- Commencing (the default date label);
- Celebrating; and,
- From
If the default value Commencing is inappropriate, you can change the date label by using the variable Card Date Label to provide a different value. For example, as shown in Figure 18 which includes
Card Date Label: Celebrating
Changing the card label#
As shown in Figure 3, by default all cards have a label intended to indicate what type of information or object the card provides (information card) or pointing to (navigation card). A card label has two components:
- name; and
By default, the label name is Module, but it can be changed. - number.
By default, the label number if automatically incremented so that the second “module” card has the number 2. See Removing the Card Number below for how to turn off the number.
Multiple independently numbered label names now supported
Before 2021, the automatic incrementing of numbers would only work for a single label name. i.e. you could have Module or Topic, but not both.
It is now possible – as shown in Figure 19 – to have multiple labels with each label’s number being automatically incremented separately.
Card label example
For example, the card interface in Figure 19 illustrates how labels can be used.
The first card – What’s next? – does not have a card label. Three of the cards have the label Module and are numbered sequentially from one to three. Two other cards have the label Personal Change.
Changing the card label
To change the card label, add a line to the description for the Blackboard item to include
Card Label: newLabelName
For example, the Blackboard item in Figure 20 is used to produce the Your steps toward becoming a master teacher card in Figure 19.
Removing the Card label
If you don’t wish to give a navigation card a label (e.g. the What’s next? card in Figure 19) you ensure that the Blackboard item contains an empty Card label line.
Card Label:
For example, the item shown in Figure 21 is used to produce the What’s next? card in Figure 23.
Changing the Card Number#
As shown above, a card label consists of a name and a number.
By default, the card number starts at 1 and increments for each card of a given label i.e. Module 1, Module 2, Module 3. The order of numbering is controlled by the order in which the items appear in the Blackboard page.
Change the order of items and you will change the numbering
Blackboard allows you to change the order of items. Changing the order of items will change the order of numbering. However, the numbering will always start at 1.
Reload the page after changing the order
Changing the order of items in Blackboard happens in the page. Meaning it does NOT change what you see in the card interface.
To see the changes, you will need to reload or refresh the Blackboard page.
Use “Card Number” to change the numbering
Figure 22 has been modified to change the numbering of the cards shown in Figure 19. Rather than starting at 1. The Module cards start at 55.
This was done by adding the following to the What does masterful teaching look like? Card
Card Number: 55
This sets the current card’s number to 55 and ensures that all subsequent cards with the same label are numbered incrementally from there (56, 57, 58…)
Removing the card number#
As mentioned above a card label typically has two parts: a name and a number. If you wish for the label to include the name, you must remove the card number. This can be two different ways:
- for a single card; or,
- for all cards.
Remove the card number for a single card
For example, the third card in Figure 22 has the label Personal Change 1. To remove the number (1) you add to the item description.
Card Number: none
For example, Figure 23 which produces
Figure 23 - Removing the card number from a single card
Figure 24 - Example card with a card label, but no card number
Remove the card number for all cards
If you wish to remove the Card Number from all of the cards with Card Labels, then you add to the title of the card interface element
noCardNumber
For example, the change in Figure 25 removes all the card numbers from Figure 22 to produce Figure 26.
Hiding a card#
Sometimes you don’t want a card to appear. e.g. you don’t want students to access a quiz just yet. Since a card is just a different way to visualise a single Blackboard Content Item. You hide the card by hiding the Blackboard item, either by making it unavailable or using adaptive release.
Hiding a card versus A “coming soon” card (see next section)
Hiding a card means that the students can never see the card. Only someone with Edit Mode on (i.e. teaching staff) will be able to see a hidden card.
Adding “coming soon” to a card means the card is still visible to students. However, the card is modified so the student is unable to click on the card and see the associated content.
Hidden cards rely on Blackboard’s services and are secure and cannot be worked around. “Coming soon” cards rely on the student’s browser and can (with some technical knowledge) be worked around.
Hiding a Blackboard item
If you hover your mouse over an item's name an arrow icon should appear. Click on it and you see the list of options (e.g. Figure 27).
To make an item unavailable to students, click on the Make Unavailable option.
Rather than manually make an item available or unavailable, you can use Adaptive Release. One of the other course options shown above (just under Make Unavailable). Adaptive Release can be used to automate availability. Make it available after a date, between two dates, available only to a particular group....and much more
What you will see in edit mode
With edit mode on you will still be able to see cards that you have hidden. A card that has been hidden will show a message. As shown in Figure 28.
Cards with adaptive release applied will currently NOT show any message.
What you and students will see when not in edit mode
With edit mode off you will see the cards closer to what students see.
Cards that are marked unavailable will not be shown.
Cards with adaptive release applied will not be shown if you meet the adaptive release rules. For example, if an item is limited only to people in a group. You will only see the matching card if you are in the group.
Making a “Coming Soon” card#
At the start of a teaching period you may have mapped out all the modules for a course. However, you haven’t yet completed all the content for all the modules. You want students to be able to see all the modules (represented by cards). Thereby gaining an overview of what the course will cover. However, you don’t want students to see the content for the incomplete modules (e.g. see Figure 29). This is where Card Coming Soon can help.
Hiding a card (see previous section) versus A “coming soon” card
Hiding a card means that the students can never see the card. Only someone with Edit Mode on (i.e. teaching staff) will be able to see a hidden card.
Adding “coming soon” to a card means the card is still visible to students. However, the card is modified so the student is unable to click on the card and see the associated content.
Hidden cards rely on Blackboard’s services and are secure and cannot be worked around. “Coming soon” cards rely on the student’s browser and can (with some technical knowledge) be worked around.
How “coming soon” cards work
Figure 29 shows a Card Interface as of the 29th of November. Two of the cards have been turned into “coming soon” cards. The second card is coming on and after November 30. The third card is coming between December 7 and January 10.
Until those times the cards will display the yellow bar in the middle of the card with a message indicating when the cards will be available. Until those times students can see the cards and any detail on the card. However, they are unable to click on the cards and see the content.
Figure 30 shows the same card interface but displayed on December 1. Since this is after November 30 the second card is no longer displaying the “coming soon” message. The second card is also displaying the Engage button. Indicating that students can now click on the card (or the Engage button) and access the associated content.
The third card retains its “coming soon” message and cannot be clicked on by students. This will only change between and including the dates of December 7 and January 10.
How to make a “coming soon” card
A card becomes a “coming soon” card by the inclusion of the card variable Card Coming Soon in the card’s content item. For example, Figure 31 shows the content item for the third card in Figure 29 and Figure 30. It includes a Card Coming Soon card variable specifying the period when the card will be available.
The value for this variable uses the same format as for Card Date. The following table shows some examples of using a Griffith University date (e.g. Week 1), an explicit date (e.g. Nov 30), and date ranges (e.g. Dec 7-Dec 12).
Example | Available |
Card Coming Soon: Week 1 | From Monday of Week 1 (as defined by the Griffith University academic calendar as applicable to the teaching period of the current course site) onwards |
Card Coming Soon: Nov 30 | From November 30 onwards |
Card Coming Soon: Week 2-6 | Between (and including) the Monday of Week 2 (as per the Griffith calendar and course site) and the Sunday of Week 6 |
Card Coming Soon: Dec 7-Dec 12 | Between Dec 7 and Dec 12 |
Card Coming Soon: Dec 7-Jan 10 | Between Dec 7 and Jan 10 |
Changing the “Card Coming Soon Label”
As shown in Figure 29, the “coming soon” date will be preceded by Available. This is the default “Card Coming Soon Label”. You can use the “Card Coming Soon Label” card variable to change this label.
For example, Figure 32 shows a “coming soon” card using
Card Coming Soon Label: Only playing during
Enabling “Review Status”#
“Review Status” is a Blackboard feature that allows students to mark items as reviewed. It also enables teachers to view what items students have marked as reviewed.
“Review Status” is set per item in Blackboard – see these instructions. With “Review Status” on there are two possible states for an item:
- Mark Reviewed (Figure 33); and
Indicating that the student can mark this item as reviewed - Reviewed (Figure 34).
Indicating that the student has marked this item as reviewed.
The changes to the Card Interface shown in Figure 33 and Figure 34 are only visible when Edit Mode is off.
With Edit Mode on the Card will be displayed as per normal and the now visible content item will show Review has been enabled, as illustrated in Figure 35.